<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Responsive 'Flat Profile' HTML Portfolio Template</title>
<link href="css/demo.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

<!--[if lt IE 9]> 
			<style>
				.rw-wrapper{ display: none; } 
				.rw-sentence-IE{ display: block;  }
			</style>
	<![endif]-->
</head>
<body ">
<div class="container topbottom">
  <div class="row-fluid">
    <div class="span5"> <img src="img/avatar.jpg" alt="Profile Avatar" class="avatar">
      <div class="navigation">
        <div>
          <ul>
            <li> <img src="img/about-icon.png"> <a href="index.html">About Me</a> </li>
            <li> <img src="img/portfolio-icon.png"> <a href="portfolio.html">Portfolio</a> </li>
            <li> <img src="img/followme-icon.png"> <a href="follow.html">Follow Me</a> </li>
            <li> <img src="img/contact-icon.png"> <a href="contact.html">Contact</a> </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="span7 homeabout">
      <div class="person"> <span class="name">Portfolio</span> </div>
      <div class="desciption">
        <p class="font16">I am available for freelance work. Fill in the form to discuss a project.</p>
      </div>
      <div id="portfolio" class="white">
        <ul id="portfolio-filter">
          <li><a href="#" class="current" data-filter="*">All</a></li>
          <li><a href="#" data-filter=".webdesign">WebDesign</a></li>
          <li><a href="#" data-filter=".photoghraphy">Photoghraphy</a></li>
          <li><a href="#" data-filter=".illustration">Illustration</a></li>
          <li><a href="#" data-filter=".print">Print</a></li>
          <li><a href="#" data-filter=".animation">Animation</a></li>
        </ul>
        <ul id="portfolio-list">
          <li class="illustration print">
            <div class="flip-container">
              <div class="flipper"><a href="img/portfolio/1.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque" rel="portfolio" class="folio">
                <div class="front">  <img src="img/portfolio/1-thumb.jpg" alt=""> </div>
                <div class="back">
                  <h4>Heading</h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                
                </a>
              </div>
            </div>
          </li>
          <li class="webdesign">
            <div class="flip-container">
              <div class="flipper">
              
              <a  href="img/portfolio/2.jpg"  rel="portfolio" class="folio">
                <div class="front">  <img src="img/portfolio/2-thumb.jpg" alt="" >  </div>
                <div class="back">
                  <h4>Sample Heading</h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
              </a>  
              </div>
            </div>
          </li>
          <li class="photoghraphy">
            <div class="flip-container">
              <div class="flipper">
              
              <a  href="img/portfolio/3.jpg"  rel="portfolio" class="folio">
                <div class="front">  <img src="img/portfolio/3-thumb.jpg" alt="" > </div>
                <div class="back">
                  <h4>Heading</h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
              </a> 
                
              </div>
            </div>
          </li>
          <li class="animation print">
            <div class="flip-container">
                <div class="flipper">
                <a href="img/portfolio/4.jpg" rel="portfolio" class="folio">
                    <div class="front">
                    	 <img src="img/portfolio/4-thumb.jpg" alt="" />
                    </div>
                     <div class="back">
                      <h4>Heading</h4>
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                    
                 </a>   
                    
               </div>
           </div>
            </li>
          <li class="animation">
            <div class="flip-container">
              <div class="flipper">
                <a href="img/portfolio/5.jpg" rel="portfolio" class="folio">
                <div class="front"> <img src="img/portfolio/5-thumb.jpg" alt="" >  </div>
                <div class="back">
                  <h4>Heading</h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                </a>
              </div>
            </div>
          </li>
          <li class="webdesign print">
            <div class="flip-container">
              <div class="flipper">
                <a href="img/portfolio/6.jpg" rel="portfolio" class="folio">
                <div class="front">  <img src="img/portfolio/6-thumb.jpg" alt="" >  </div>
                <div class="back">
                  <h4>Heading</h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                </a>
                
              </div>
            </div>
          </li>
          <li class="photoghraphy">
            <div class="flip-container">
              <div class="flipper">
              <a href="img/portfolio/7.jpg" rel="portfolio" class="folio">
                <div class="front">  <img src="img/portfolio/7-thumb.jpg" alt="" > </div>
                <div class="back">
                  <h4>Heading</h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                
                </a>
              </div>
            </div>
          </li>
          <li class="illustration">
            <div class="flip-container">
              <div class="flipper">
              <a href="img/portfolio/8.jpg" rel="portfolio" class="folio">
                <div class="front"> <img src="img/portfolio/8-thumb.jpg" alt="" >  </div>
                <div class="back">
                  <h4>Heading</h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                </a>
              </div>
            </div>
          </li>
          <li class="illustration">
            <div class="flip-container">
              <div class="flipper">
              <a href="img/portfolio/9.jpg" rel="portfolio" class="folio">
                <div class="front">  <img src="img/portfolio/9-thumb.jpg" alt="" > </div>
                <div class="back">
                  <h4>Heading</h4>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/modernizr.js"></script> 
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script> 
<script type="text/javascript" src="js/jquery.isotope.min.js"></script> 
<script src="js/custom.js" type="text/javascript"></script> 
<script type="text/javascript">
	$(document).ready(function(){		
		$('.flip-container').hover(function(){				
			$(this).addClass('flip');
		},function(){
			$(this).removeClass('flip');
		});
	});
</script>
  
</body>
</html>
